import React, { useState, useEffect, useContext } from 'react'
import Top from '../../components/Top/Top';
import { ReducerContext } from '../../App';
import { Carousel } from "antd-mobile";
import "./Mine.css"
import { reqBanner } from "../../request/api"

const Mine = (props) => {
    console.log(props);
    let { history } = props
    let title = "我的"
    const [banner, setBanner] = useState([])
    const { state, dispatch, actions } = useContext(ReducerContext);
    useEffect(() => {
        reqBanner().then(res => {
            if (res.data.code == 200) {
                setBanner(res.data.list)
            }
        })
    }, [])
    return (
        <div>
            <Top title={title}></Top>
            <div className="banner">
                <Carousel autoplay={true} infinite>
                    {banner.map((item) => (
                        <img key={item.id} src={item.img} alt=""
                            style={{ width: "100%", verticalAlign: "top" }}
                        />

                    ))}
                </Carousel>
            </div>
            <button onClick={() => dispatch(actions.changeInfo({}, history))}>退出登录</button>
        </div>
    )
}

export default Mine
